<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item :to="{ path: '/exam/question' }">题库管理·试题列表</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="grid-content">
                <el-row>
                    <el-col :span="6">
                        <div>
                            <el-button color="#626aef" size="large" type="primary" v-if="id == -1" plain
                                @click="add">新增试题</el-button>
                            <el-button color="#A5AAA3" size="large" type="primary" :disabled="id == -1 ? true : false" plain
                                @click="dialogVisible = true">导入试题</el-button>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="flex">
                            <el-input v-model="search" size="large" @input="handlerPageNo" style="width: 45vh;"
                                placeholder="请输入需要查询的试题" class="input-with-select">
                                <template #append>
                                    <el-button plain @click="selectc">查询</el-button>
                                </template>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div class="flex">
                            <el-checkbox @change="(val) => checkbox(val, item)" v-for="(item, index) in detailsList"
                                :label="item.title" :key="index">
                                {{ item.title }}
                            </el-checkbox>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 表格 -->
            <div class="trr">
                <el-table v-loading="loading" :data="tableData" height="53vh" max-height="53vh" border style="width: 100%">
                    <el-table-column type="index" width="60" label="序号" />
                    <el-table-column prop="content" label="题干" width="180" show-overflow-tooltip />
                    <el-table-column prop="type" label="类型" />
                    <el-table-column prop="lv" label="难度" />
                    <el-table-column prop="createTime" label="添加时间" width="150" />
                    <el-table-column prop="author" label="作者" />
                    <el-table-column label="标签">
                        <template #default="scope">
                            <el-tag :key="item.id" v-for="item in scope.row.labels.split(',')">
                                {{ item }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="lv" label="使用" />
                    <el-table-column prop="isPublish" label="发布">
                        <template #default="scope">
                            <el-tag class="ml-2" :type="scope.row.isPublish == 0 ? 'danger' : 'success'">{{
                                scope.row.isPublish == 0 ? '否' : '是' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isBan" label="禁用">
                        <template #default="scope">
                            <el-tag class="ml-2" :type="scope.row.isBan == 0 ? 'success' : 'danger'">{{ scope.row.isBan == 0
                                ? '否' : '是' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="300">
                        <template #default="scope">
                            <el-button @click="select(scope.row)">详细</el-button>
                            <template v-if="scope.row.isPublish == 0">
                                <el-button type="danger" @click="Del(scope.row)">删除</el-button>
                                <el-button type="success" @click="blish(scope.row)">发布</el-button>
                            </template>
                            <template v-else>
                                <el-button v-if="scope.row.isBan == 0" type="danger" plain @click="disable(scope.row)">禁用
                                </el-button>
                            </template>
                            <template v-if="scope.row.isPublish!=0 ">
                                <template v-if="scope.row.isPublish == 0 || scope.row.isBan == 1">
                                    <el-button type="danger" @click="Remo(scope.row)">移除</el-button>
                                </template>

                                <template v-if="scope.row.isBan == 1 || scope.row.isPublish == 0">
                                    <el-button type="success" plain @click="recover(scope.row)">恢复
                                    </el-button>
                                </template>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="example-pagination-block" style="margin-top: 1vh;">
                    <el-pagination :page-size="obj.limit" :page-sizes="[5, 10, 20, 30]" layout="prev, pager, next,sizes,"
                        :total="obj.index" @size-change="handleSizeChange" @current-change="changes" />
                </div>
            </div>
        </div>

        <!-- 导入试题弹出框 -->
        <el-dialog v-model="dialogVisible" :show-close="true" style="width: 80%;margin-top: 1vw;">
            <template #header="{ titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass" style="text-align: left;margin-top: 10px;">导入试题</h4>
                </div>
            </template>
            <div class="tab" style="height: 67; margin: auto;margin-top: -3vw;">
                <div class="grid-content">
                    <el-row>
                        <el-col :span="7">
                            <div>
                                <el-select style="width: 100%;" @change="Que" multiple v-model="Ques" placeholder="选择题库搜索">
                                    <el-option v-for="item in tableDatas" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="flex">
                                <el-input v-model="inputs" size="large" @input="ddds" style="width: 45vh;"
                                    placeholder="请输入需要查询的试题" class="input-with-select">
                                    <template #append>
                                        <el-button>查询</el-button>
                                    </template>
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="flex">
                                <el-select @change="labes" v-model="lablse" multiple placeholder="选择题库搜索"
                                    style="right: 8vw; width:150%">
                                    <el-option v-for="item in sendTypeList" :key="item" :label="item.label" :value="item" />
                                </el-select>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="trr" style="height: 50vh;">
                    <el-table v-loading="loading" :data="tableDatass" height="43vh" max-height="43vh" border
                        style="width: 100%" @selection-change="selectionAll" row-key="id">
                        <el-table-column type="selection" width="55" :reserve-selection="true" />
                        <el-table-column type="index" width="60" label="序号" />
                        <el-table-column prop="content" label="题干" width="180" show-overflow-tooltip />
                        <el-table-column prop="lv" label="难度" />
                        <el-table-column prop="createTime" label="添加时间" width="150" />
                        <el-table-column prop="author" label="作者" />
                        <el-table-column label="标签">
                            <template #default="scope">
                                <el-tag :key="item.id" v-for="item in scope.row.labels.split(',')">
                                    {{ item }}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="example-pagination-block" style="margin-top: 1vh;">
                        <el-row>
                            <el-col :span="10">
                                <div>
                                    <el-pagination :page-size="objs.limit" :page-sizes="[5, 10, 20, 30]"
                                        layout="prev, pager, next,sizes," :total="objs.index"
                                        @size-change="handleSizeChange" @current-change="changes" />
                                </div>
                            </el-col>
                            <el-col :span="8">
                            </el-col>
                            <el-col :span="6">
                                <text style="font-weight: 100;">无试题选择限制,实际选择【{{ imports.length }}】道试题</text>
                            </el-col>
                        </el-row>

                    </div>
                </div>

                <div class="grid-content">
                    <el-button style="width: 100%;" @click="Questions" type="success" plain>确认导入</el-button>
                </div>
            </div>

        </el-dialog>
    </div>
</template>
<script lang="ts">
import type { TypeIndexDto } from '../../../type/question'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { MoveQuestionsToBank, GetQuestions, BanQuestions, PublishQuestions, DeleteQuestions, RemoveQuestionFromBank, GetLabels, GetQuestionBanks } from '../../../api/question/question'
import { ElMessageBox, ElNotification } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import { objectPick } from '@vueuse/shared';



export default defineComponent({

    setup() {
        const router = useRouter();
        const route = useRoute()

        const data = reactive<TypeIndexDto>({
            id: route.params.id,
            tableData: [],
            loading: true,
            inputs: '',
            search: '',
            dialogVisible: false,//导入弹出框
            tableDatas: [],  //题库搜索
            sendTypeList: [], //标签搜索

            tableDatass: [],  //导入试题查询
            input: '', //关键词搜索
            Ques: [],
            lablse: [], //标签
            imports: [], //导入多选
            ids: [],

            obj: {
                page: 1,
                limit: 10,
                index: 0,
                isBan: -1,
                isPublish: -1,
            },

            objs: {
                page: 1,
                limit: 10,
                index: 0,
            },
            detailsList: [
                {
                    "title": "禁用",
                },
                {
                    "title": "启用",
                },
                {
                    "title": "发布",
                },
                {
                    "title": "未发布",
                }
            ]
        })

        const events = {
            handleClose(done: any) {
                done();
            },

            // page 改变时触发
            changes(val: any) {
                data.loading = true
                data.objs.page = val
                events.nh()
            },

            // 恢复试题
            recover(val: any) {
                data.loading = true
                BanQuestions({
                    ids: [val.id],
                    isBan: 0
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading = false
                        events.bind()
                        ElNotification({
                            title: '恢复成功',
                            type: 'success',
                        })
                    } else {
                        data.loading = false
                        events.bind()
                        ElNotification({
                            title: '恢复失败',
                            type: 'warning',
                        })
                    }
                })
            },


            // 跳转试题详细
            select(val: any) {
                router.push({ path: `/exam/question/detail/${val.id}` })
            },

            selectionAll(selection: any) {
                data.imports = selection
            },

            ddds() {
                events.nh()
            },

            Que(val: any) {
                data.Ques = val
                data.loading = true
                events.nh()
            },

            labes(val: any) {
                data.lablse = val
                data.loading = true
                events.nh()
            },

            goBack() {
                window.history.go(-1)
            },

            //导入试题确认导入
            Questions() {
                data.imports.forEach((na: any) => {
                    data.ids.push(na.id)
                })

                ElMessageBox.confirm('确认要导入试题嘛！, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    MoveQuestionsToBank({
                        id: route.params.id,
                        ids: data.ids
                    }).then((res: any) => {
                        if (res.result == 0) {
                            ElNotification({
                                title: res.message,
                                type: 'success',
                            })
                            data.dialogVisible = false
                            // console.log(res)
                        } else {
                            ElNotification({
                                title: res.message,
                                type: 'warning',
                            })
                        }
                    })
                })
            },

            //跳转add新增试题
            add() {
                router.push('/exam/question/add')
            },

            //移除
            Remo(val: any) {
                data.loading = true
                RemoveQuestionFromBank({
                    id: route.params.id,
                    ids: [val.id]
                }).then((res: any) => {
                    if (res.result == 0) {
                        ElNotification({
                            title: res.message,
                            type: 'success',
                        })
                        events.bind()
                    } else {
                        ElNotification({
                            title: res.message,
                            type: 'error',
                        })
                    }
                })
            },

            //删除
            Del(val: any) {
                data.loading = true
                DeleteQuestions({
                    ids: [val.id]
                }).then((res: any) => {
                    if (res.result == 0) {
                        ElNotification({
                            title: res.message,
                            type: 'success',
                        })
                        events.bind()
                    } else {
                        ElNotification({
                            title: res.message,
                            type: 'error',
                        })
                    }
                })
            },

            //发布
            blish(val: any) {
                data.loading = true
                PublishQuestions({
                    ids: [val.id],
                    isPublish: 1
                }).then((res: any) => {
                    if (res.result == 0) {
                        ElNotification({
                            title: res.message,
                            type: 'success',
                        })
                        events.bind()
                    } else {
                        ElNotification({
                            title: res.message,
                            type: 'error',
                        })
                        events.bind()
                    }
                })
            },

            //禁用
            disable(val: any) {
                data.loading = true
                BanQuestions({
                    ids: [val.id],
                    isBan: 1
                }).then((res: any) => {
                    if (res.result == 0) {
                        ElNotification({
                            title: res.message,
                            type: 'success',
                        })
                        events.bind()
                    } else {
                        ElNotification({
                            title: res.message,
                            type: 'error',
                        })
                    }
                })
            },


            checkbox(val: any, name: any) {
                console.log(name.title)
                if (name.title == "启用") {
                    if (val) {
                        if (data.obj.isBan != -1) {
                            data.obj.isBan = -1
                            events.bind()
                            return
                        }
                        data.obj.isBan = 0
                        events.bind()
                    } else {
                        if (data.obj.isBan == -1) {
                            data.obj.isBan = 1
                            events.bind()
                            return
                        }
                        data.obj.isBan = -1
                        events.bind()
                    }
                }
                if (name.title == "禁用") {
                    if (val) {
                        if (data.obj.isBan != -1) {
                            data.obj.isBan = -1
                            events.bind()
                            return
                        }
                        data.obj.isBan = 1
                        events.bind()
                    } else {
                        if (data.obj.isBan == -1) {
                            data.obj.isBan = 0
                            events.bind()
                            return
                        }
                        data.obj.isBan = -1
                        events.bind()
                    }
                }
                if (name.title == "发布") {
                    if (val) {
                        if (data.obj.isPublish != -1) {
                            data.obj.isPublish = -1
                            events.bind()
                            return
                        }
                        data.obj.isPublish = 1
                        events.bind()
                    } else {
                        if (data.obj.isPublish == -1) {
                            data.obj.isPublish = 0
                            events.bind()
                            return
                        }
                        data.obj.isPublish = -1
                        events.bind()
                    }
                }
                if (name.title == "未发布") {
                    if (val) {
                        if (data.obj.isPublish != -1) {
                            data.obj.isPublish = -1
                            events.bind()
                            return
                        }
                        data.obj.isPublish = 0
                        events.bind()
                    } else {
                        if (data.obj.isPublish == -1) {
                            data.obj.isPublish = 1
                            events.bind()
                            return
                        }
                        data.obj.isPublish = -1
                        events.bind()
                    }
                }
            },

            //分页每一页条数
            handleSizeChange(val: any) {
                data.objs.limit = val
                events.nh()
            },

            handleCurrentChange(val: any) {
                data.loading = true
                data.obj.page = val
                setTimeout(() => {
                    events.bind()
                    data.loading = false
                }, 1000);
            },

            //分页每一页条数
            handleSizeChanges(val: any) {
                data.obj.limit = val
                events.nh()
            },

            handleCurrentChanges(val: any) {
                data.loading = true
                data.obj.page = val
                setTimeout(() => {
                    events.nh()
                    data.loading = false
                }, 1000);
            },

            handlerPageNo() {
                data.loading = true
                events.bind()
            },

            //查询
            selectc() {
                data.loading = true
                events.bind()
            },

            nh() {
                let na = data.lablse.join(",")
                let nc = data.Ques.join(",")
                GetQuestions({
                    page: data.objs.page,
                    limit: data.objs.limit,
                    isPublish: 1,
                    isBan: 0,
                    key: data.inputs,
                    labels: na,
                    excludeQBID: route.params.id,
                    banks: nc,
                    excludeQIDs: ''
                }).then((res: any) => {
                    console.log(res)
                    if (res.result == 0) {
                        data.tableDatass = res.data.data
                        data.objs.index = res.data.total
                        data.loading = false
                    }
                })
            },

            bind() {
                GetQuestions({
                    id: route.params.id,
                    page: data.obj.page,
                    limit: data.obj.limit,
                    key: data.search,
                    isBan: data.obj.isBan,
                    isPublish: data.obj.isPublish,
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.tableData = res.data.data
                        data.obj.index = res.data.total
                        data.loading = false
                    }
                })
            }


        }

        onMounted(() => {
            events.bind()
            events.nh()

            GetLabels({}).then((res: any) => {
                if (res.result == 0) {
                    data.sendTypeList = res.data
                    data.loading = false
                }
            })


            GetQuestionBanks({
                isPublish: 1
            }).then((res: any) => {
                if (res.result == 0) {
                    data.tableDatas = res.data.data
                    data.loading = false
                }
            })

        })

        return {
            ...toRefs(data),
            ...events
        }

    },
})
</script>

<style scoped>
/* 背景 */
.tab {
    /* background-color: rgb(239, 240, 242); */
    padding: 1vh;
    border-radius: 5px;
    margin-top: -1vh;
}

/* 按钮样式 */
.grid-content {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    background-color: rgb(251, 251, 251);
    width: 99%;
    line-height: 45px;
    text-align: left;
    padding: 10px;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 2px grey;
}

.flex {
    float: right;
}

.trr {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    padding: 10px;
    width: 99%;
    background-color: rgb(251, 251, 251);
    box-shadow: 0px 0px 2px grey;
}
</style>
